<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="str是否为空:">
        str.isNullOrEmpty() :<br />
        ===>>{{ (str).isNullOrEmpty() }}
      </el-form-item>
      <el-form-item label="时间戳转化:">
        str.parseTime("{y}-{m}-{d} {h}:{i}:{s}") :<br />
        ===>>{{ str.parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
      </el-form-item>
      <el-form-item label="相加运算:">
        str.add(10) :<br />
        ===>>{{ (str||0).add(10) }}
      </el-form-item>
      <el-form-item label="相减运算:">
        str.reduce(10) :<br />
        ===>>{{ (str||0).reduce(10) }}
      </el-form-item>
      <el-form-item label="字符串长度:">
        str.charlen() :<br />
        ===>>{{ (str||0).charlen() }}
      </el-form-item>
      <el-form-item label="首尾去空格:">
        "    你好世界      ".trim()<br />
        ===>>{{ "    你好世界      ".trim() }}
      </el-form-item>
      <el-form-item label="首尾去空格:">
        str.contains("e")<br />
        ===>>{{ str.contains("e") }}
      </el-form-item>
      <el-form-item label="比较大小相差字符:">
        str.compare("e")<br />
        ===>>{{ str.compare("e") }}
      </el-form-item>
      <el-form-item label="替换字符方式1:">
        "前三名：${0}，${1}，${2}".format("张三","李四","王二")<br />
        ===>>{{ "前三名：${0}，${1}，${2}".format("张三","李四","王二") }}
      </el-form-item>
      <el-form-item label="替换字符方式2:">
        str.replaceLen(1,2,"张三")<br />
        ===>>{{ str.replaceLen(1,2,"张三") }}
      </el-form-item>
      <el-form-item label="替换字符方式3:">
        str.replaceChar("1","e",1)<br />
        ===>>{{ str.replaceChar("1","e",1) }}
      </el-form-item>
      <el-form-item>
        <el-input v-model="str" type="text" placeholder="请输入内容">
          <template #prepend>str:</template>
          <template #suffix>
            <i class="el-icon-edit el-input__icon" @click="reset"> </i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import {ref} from 'vue'
export default {
    data() {
       
        const str = ref("");
        const reset = ()=>{
            const timestamp = (new Date()).getTime();
            str.value = timestamp+"";
        }
        reset();
        return {
            str,
            reset
        }
    }
}
</script>
